<template>
    <div class="song-list">
        <ul class="song-list-header">
            <li v-for="(item,index) in songStyle" :key="index" @click="handleChangeView(item.name)"
                :class="{active:item.name==activeName}">
                {{item.name}}
            </li>
        </ul>
        <div>
            <content-list :contentList="albumDatas"></content-list>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange" background layout="total,prev,pager,next"
                        :current-page="currentPage" :page-size="pageSize" :total="title">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import ContentList from '../components/ContentList';
import {getAllSongList,getSongListOfLikeStyle} from '../api/index';
import {mixin} from "../mixins";
import {songStyle} from '../assets/data/songList';
import {getAllStroe,getAllsp,getNumberByStart,searchStoresByStarRating} from "../api/shop";

export default {
    name: 'song-list',
    components:{
        ContentList
    },
    data(){
        return{
            albumDatas: [],      //歌单数据
            pageSize: 15,        //页面大小，一页有15条数据
            currentPage: 1,      //当前页，默认第一页
            songStyle: [],           //风格
            activeName: '全部店铺' ,   //当前风格
            title:0,
            start:0,

        }
    },
    computed:{
        //计算当前表格中的数据
        data(){
            // return this.albumDatas.slice((this.currentPage - 1)*this.pageSize,this.currentPage*this.pageSize)
        }
    },
    mounted(){
        this.songStyle = songStyle;
        // this.getSongList();
        this.getAllStroeList();
        this.getAllShopNumber();
    },

    methods:{
      //分页获取全部商店
      getAllStroeList(){
        getAllStroe(this.currentPage,15).then(res=>{
          if (res.data.code == 200){
            this.albumDatas = res.data.obj;
          }
        })
        this.getAllShopNumber();
      },
        getSongList(){
          this.getAllStroeList();
          this.getAllShopNumber();
            // getAllSongList()
            //     .then(res =>{
            //         this.currentPage = 1;
            //         this.albumDatas = res;
            //     })
        },
        //获取当前页
        handleCurrentChange(val){
            this.currentPage = val;
            if (this.activeName == "全部店铺"){
            this.getAllStroeList();
            }else {
              this.goSongListOfStyle(this.activeName);
            }
        },
        //根据style显示对应的歌单
        handleChangeView(name){
            this.currentPage = 1;
            this.activeName = name;
            this.albumDatas = [];
            if(name == '全部歌单'){
                this.getSongList();
            }else{
                this.goSongListOfStyle(name)
            }
        },
        //根据style查询对应的歌单
        goSongListOfStyle(style){
        // this.currentPage = 1;
        if (style == "七星店铺"){
          this.start = 7;
          this.zqh();
        }else if(style == "六星店铺"){
          this.start = 6;
          this.zqh();
        }else if(style == "五星店铺"){
          this.start = 5;
          this.zqh();
        }else if(style == "四星店铺"){
          this.start = 4;
          this.zqh();
        }else if(style == "三星店铺"){
          this.start = 3;
          this.zqh();
        }else if(style == "二星店铺"){
          this.start = 2;
          this.zqh();
        }else if(style == "一星店铺"){
          this.start = 1;
          this.zqh();
        }else if(style == "全部店铺"){
          this.getAllStroeList();
          this.getAllShopNumber();
        }else {

          console.log("参数传递错误")
        }
          // console.log(this.start)
          // searchStoresByStarRating(this.start,this.currentPage,15).then(res=>{
          //   this.albumDatas = res.data.obj;
          // })
          // getNumberByStart(this.start).then(res=>{
          //   this.title = res.data.obj;
          // })
          // this.zqh();
            // getSongListOfLikeStyle(style)
            //     .then(res =>{
            //             this.currentPage = 1;
            //             this.albumDatas = res;
            //         })
        },
      //获取所有店铺的数量
      getAllShopNumber(){
        getAllsp().then(res=>{
          if (res.data.code == 200){
            this.title = res.data.obj;
          }
        })
      },
      //通过星级查询
      zqh(){
        searchStoresByStarRating(this.start,this.currentPage,15).then(res=>{
          this.albumDatas = res.data.obj;
        })
        getNumberByStart(this.start).then(res=>{
          this.title = res.data.obj;
        })
      },

    }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/song-list.scss';
</style>
